<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%-- <%@ page session="false" %> --%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../Common.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join</title>

<script type="text/javascript">
$(function(){
 	$("#ID").keyup(function(){
 		var ID = $("#ID").val(),
 			text ="";	
 		$.getJSON("member.do", "action=checkID&ID="+ID, function(json){
 			if(!ID==""){
	 			if(json>0){
	 				text = ID+"는 이미 사용중인 ID 입니다.";
	 			}	
	 			else if(json<=0){
	 				text =ID+" 를 사용할 수 있습니다.";
	 			}
 			}
 			else{
 				text ="사용할 ID를 입력해 주세요.";
 			}
 			$("#chkID").html("").append(text); 	
 		});
 	});
 	
 	var option="";
 	var this_year=2014;
 	for(var i=this_year; i>=1900; i--){
 		option ="<option value="+i+" class='year'>"+i+"</option>";
 	 	$("#year").append(option);
 	 	if( $(".year").val()=="1990") {
 	 		$(".year").prop("selected", "selected");
 	 	}
 	}
 	
	for(var i=1; i<=12; i++){
 		option ="<option value="+i+" class='month'>"+i+"</option>";
 	 	$("#month").append(option);
 	}
 	
 	var day="";
 	$("#month").change(function(){
 		var selected_month = $("#month option:selected");
 		selected_month.each(function(){
	   	var month =$("#month option:selected").val();
 		if(month == 4 || month == 6 || month == 9 || month == 11){day=30;setDay(day);}
 	 		else if(month == 2){day=29;setDay(day);}
 	 		else{day=31;setDay(day);}
 		});
 	});
//  	휴대폰번호 autoTab
 	$("#mobile2").keyup(function(){
 		var mobile2 = $(this).val().match(/[0-9]/g); //숫자만 인식
 		if(mobile2 !=null && mobile2.length==4){
 			$("#mobile3").focus();
			}
 	});
 	$("#mobile3").keyup(function(){
 		var mobile3 = $(this).val().match(/[0-9]/g); //숫자만 인식
 		if(mobile3 !=null && mobile3.length==4){
 			$("#EMAIL").focus();
			}
 	});

//  	숫자만 입력
 	 $("#mobile2").keyup(function() {
 		 $(this).val( $(this).val().replace(/[^0-9]/gi,"") );
 		 });
 	$("#mobile3").keyup(function() {
		 $(this).val( $(this).val().replace(/[^0-9]/gi,"") );
		 });
//  	 $(document).on("keyup", "input:text[datetimeOnly]", function() {$(this).val( $(this).val().replace(/[^0-9:\-]/gi,""))});

});
function setDay(day){
	$("#day").html("");
	for(var i=1; i<=day; i++){
		option ="<option value="+i+" class='day'>"+i+"</option>";
 	 	$("#day").append(option);
	}
}

function check_mailValue(txtMail) {
    var check1 = /(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)/;
    var check2 = /^[a-zA-Z0-9\-\.\_]+\@[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4})$/;

    if (!check1.test(txtMail) && check2.test(txtMail)) {
        return true;
    } else {
        return false;
    }
}
function beforeJoin(){
	var ID = $("#ID").val(),
		PW = $("#PW").val(),
		PW1 = $("#PW1").val(),
		NAME = $("#NAME").val(),
		YEAR = $("#year").val(),
		MONTH = $("#month").val(),
		DAY = $("#day").val(),
		EMAIL = $("#EMAIL").val();
	
	if(ID == ""){
		alert("ID를 입력해 주세요.");
		return;
	}
	if(PW =="" ||PW1 ==""){
		alert("비밀번호를 입력해 주세요.");
		return;
	}
	else{
		if(PW!=PW1){
			alert("비밀번호를 확인해 주세요.");
			return;
		}
	}
	if(NAME == ""){
		alert("이름을 입력해 주세요.");
		return;
	}
	else if(YEAR =="" || MONTH =="" || DAY ==""){
		alert("생년월일을 입력해 주세요");
	}	
	if(EMAIL == ""){
		alert("이메일을 입력해 주세요.");
		return;
	}
	else{
		if(!check_mailValue(EMAIL)){
			alert("이메일 주소를 정확히 입력해 주세요.");
			return;
		}
	}
	join();
}
$('#EMAIL').keyup(function(e) {
    if (e.keyCode == 13) join();        
});


function join(){
	var 
		YEAR = $("#year").val(),
		MONTH = $("#month").val(),
		DAY = $("#day").val(),
		BIRTH = "",
		url = "member.do"
	;
	
	if(MONTH<10){MONTH="0"+MONTH;}
	if(DAY<10){DAY="0"+DAY;}
	BIRTH=YEAR+"/"+MONTH+"/"+DAY;
	$("#BIRTH").val(BIRTH);
// 	alert("생년월일 : "+BIRTH);
	
	var joinData = $("#joinForm").serialize();
	$.postJSON(url, joinData, function(json){
		if(json>0){
			alert("가입성공\n로그인 후 사용해 주세요.");
			location.href="/kim";
		}
		else{
			alert("가입실패\n다시 시도해 주세요.");
		}
	});
}

</script>
<body style="background-color: #fff;">
<div class="wrapper">
<form action="member.go" id="joinForm" name="joinForm" method="post">
	<div class="content">
	<input type="hidden" name="BIRTH" id="BIRTH" value=""/>
	<input type="hidden" name="action" id="action" value="insertMember"/>
		<input type="text" class="form-control" id="ID" name="ID" placeholder="ID">
		<p style="color: red;margin-left: 15px;" id="chkID">사용할 ID를 입력해 주세요.</p>
		<input type="password" class="form-control" id="PW" name="PW" placeholder="Password" onkeyup="chkPw(this, 'chkPwView')">
		<p style="color: red;margin-left: 15px;" id="chkPwView"></p>
		<input type="password" class="form-control" id="PW1" name="PW1" placeholder="Confirm Password"><br/>
				
		<input type="text" class="form-control" id="NAME" name="NAME" placeholder="NAME">
		<div style="display: table-cell; margin: 0 auto; text-align: center; width: 100%;" >
			<select class="form-control" id="year" name="year" style="width: 90px; float: left;margin: 0 auto; ">
				<option value="">생년</option>
			</select>
			<select class="form-control" id="month" name="month" style="width: 90px; float: left;margin: 0 auto;  ">
				<option class="option" value="">월</option>
			</select> 
			<select class="form-control" id="day" name="day" style="width: 90px; float: left;margin: 0 auto;  "> 
				<option class="option" value="">일</option>
			</select>
		</div>
		<div style=" margin: 0 auto; text-align: center; width: 100%;" >
			<select class="form-control" id="mobile1" name="mobile1" style="width: 90px; float: left;margin: 0 auto;  "> 
				<option value="010">010</option>
				<option value="011">011</option>
				<option value="016">016</option>
				<option value="017">017</option>
				<option value="018">018</option>
				<option value="019">019</option>
			</select>
			<input type="text" class="form-control" id="mobile2" name="mobile2" placeholder="" maxlength="4" style="float: left; width: 90px;" >
			
			<input type="text" class="form-control" id="mobile3" name="mobile3" placeholder="" maxlength="4" style="float: left;width: 90px;">
		</div>	
		<input type="text" class="form-control" id="EMAIL" name="EMAIL" placeholder="E-MAIL">
	</div>
	<div align="center">
	<br/>
		<button type="button" class="btn btn-primary btn" style="width: 70px;" onclick="beforeJoin();">JOIN</button>
  		<button type="reset" class="btn btn-default btn">RESET</button>
  		<br/><br/>
	</div>
</form>	
</div>

</body>
</html>
